<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-10-25
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/statics/hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/statics/hplus/js/jquery.min.js"></script>
    <link href="${pageContext.request.contextPath}/statics/hplus/css/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrapvalidator/bootstrapValidator.min.css">
    <script src="${pageContext.request.contextPath}/statics/hplus/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script>
        //得到查询的参数
        function queryParams (params) {

        };

        function searcha() {
            //返回表格的 Options。
            var opts = $("#fuwuxiangmu").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var username = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/fuwu/queryByName",{'name':username,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#fuwuxiangmu").bootstrapTable('load',data) ;
            })
        }


        $(function () {

            <!--校验框架-->
            $(function () {
                $('#jy').bootstrapValidator({
                    message: '',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        fuwu_Name: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '项目名称不能为空！'
                                }
                            }
                        },
                        fuwu_Shoujia: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '有效期不能为空！'
                                },
                                digits: {
                                    message: '该值只能包含数字。'
                                }
                            }
                        }
                    }
                });
            });

            $("#fuwuxiangmu").bootstrapTable({
                url:'${pageContext.request.contextPath}/fuwu/queryByName',
                //设置每页多少条数据
                pageSize:3,
                pageList:[3,5,8,16],
                height:380,
                pageNumber:1,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        username:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'fuwu_Id',
                        title:'服务编号'
                    },
                    {
                        field:'fuwu_Name',
                        title:'服务名称'
                    },
                    {
                        field:'fuwuxiangmu_Name',
                        title:'服务分类'
                    },
                    {
                        field:'fuwu_Shoujia',
                        title:'服务售价'
                    },
                    {
                        field:'zhuangtai_Name',
                        title:'状态',
                    },
                    {
                        field:'jifem_Name',
                        title:'是否积分兑换'
                    },
                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\"" +
                                "style='background-color: red;color: white;border:1px solid red;" +
                                "font-size: 14px' onclick='javascript:del("+row.fuwu_Id+")'>删除</button>"+
                                "<button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\"" +
                                " style='margin-left: 10px;font-size: 14px;' onclick='javascript:ud("+row.fuwu_Id+")'>修改</button>"
                        }
                    }
                ]
            }) ;
        }) ;

        /**
         * 根据id删除服务信息
         */
        var kids;
        function del(kids){
            fuwu_Id=kids;
            $("#sc").modal('show');
        }
        function dodelete(){
            $.post('${pageContext.request.contextPath}/fuwu/shanchu',{fuwu_Id:fuwu_Id},function(data){
                if(data!=null){
                    searcha();
                    $("#sc").modal('hide');
                }
            })
        }

        /**
         * 添加服务信息
         */
        function toadd(){
            $("#Div3").modal('show');
        }
        function doadd(){
            var fuwu_Name=$('[name=fuwu_Name]').val();
            var fuwu_Fenlei=$('[name=fuwu_Fenlei]').val();
            var fuwu_Shoujia=$('[name=fuwu_Shoujia]').val();
            var zhuangtai=$('[name=zhuangtai]:checked').val();
            var dp_XianZhi=$('[name=dp_XianZhi]').val();
            var beiZhu=$('[name=beiZhu]').val();
          $.post('${pageContext.request.contextPath}/fuwu/inst',{fuwu_Name:fuwu_Name,fuwu_Fenlei:fuwu_Fenlei,fuwu_Shoujia:fuwu_Shoujia,zhuangtai:zhuangtai,dp_XianZhi:dp_XianZhi,beiZhu:beiZhu},function (data) {
              if (data!=null){
                  searcha();
                  $("#Div3").modal('hide');
              } else {
                  alert("增加失败");
              }
          })
        }

        /**
         * 修改服务项目
         * @type {number}
         */
        var fuwu_Id=0;
        function ud(id){
            fuwu_Id=id;
            $("#Div4").modal('show');
            //发送post请求
            $.post('${pageContext.request.contextPath}/fuwu/queryById',{fuwu_Id:fuwu_Id},function (data) {
                //给表单赋值
                $("[name=fuwu_NameG]").val(data.fuwu_Name);
                $("[name=fuwu_FenleiG]").val(data.fuwu_Fenlei);
                $("[name=fuwu_ShoujiaG]").val(data.fuwu_Shoujia);
                $("[name=zhuangtaiG]").val(data.zhuangtai);
                $("[name=dp_XianZhiG]").val(data.dp_XianZhi);
                $("[name=beiZhuG]").val(data.beiZhu);
            })
        };
        function doupdate(){
            var fuwu_NameG=$("[name=fuwu_NameG]").val();
            var fuwu_FenleiG=$("[name=fuwu_FenleiG]").val();
            var fuwu_ShoujiaG=$("[name=fuwu_ShoujiaG]").val();
            var zhuangtaiG=$("[name=zhuangtaiG]").val();
            var dp_XianZhiG=$("[name=dp_XianZhiG]").val();
            var beiZhuG=$("[name=beiZhuG]").val();
            $.post('${pageContext.request.contextPath}/fuwu/xg',{fuwu_Id:fuwu_Id,fuwu_Name:fuwu_NameG,fuwu_Fenlei:fuwu_FenleiG,fuwu_Shoujia:fuwu_ShoujiaG,zhuangtai:zhuangtaiG,dp_XianZhi:dp_XianZhiG,beiZhu:beiZhuG},function(data){
                if(data!= null){
                    searcha();
                    alert("修改成功！")
                    $("#Div4").modal('hide');
                }else{
                    alert("修改失败！");
                }
            })
        }

    </script>

</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">服务项目</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
            </div>
            <div class="col-sm-6">
                <form  class="form-inline pull-right">
                    服务关键字：<input id="username" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table id="fuwuxiangmu"></table>
            </div>
        </div>

    </div>
</div>


<!---删除模态框-->
<div class="modal fade" id="sc">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">提示信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12" id="addrole" style="height: 100px">
                        <p>确认删除信息吗？</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"onclick="dodelete()">删除</button>
            </div>
        </div>
    </div>
</div>


<%--增加模态框--%>
<div class="modal fade" id="Div3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加服务项目</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" id="jy">
                    <div class="form-group">
                        <label for="fuwu_Name" class="col-sm-2 control-label">项目名称:</label>
                        <div class="col-sm-9">
                            <input  type="text" name="fuwu_Name" class="form-control" id="title1" placeholder="请输入项目名称">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="fuwu_Fenlei" class="col-sm-2 control-label">所属分类:</label>
                        <div class="col-sm-10">
                            <div class="col-sm-6">
                                <select name="fuwu_Fenlei" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                    <option value="1">普通服务</option>
                                    <option value="2">理发</option>
                                    <option value="3">美容类</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="dp_XianZhi" class="col-sm-2 control-label">店铺限制:</label>
                        <div class="col-sm-10">
                            <div class="col-sm-6">
                                <select name="dp_XianZhi" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                <option value="1">启用店铺</option>
                                <option value="2">禁用店铺</option>
                            </select>
                        </div>
                    </div>
                    </div>

                    <div class="form-group">
                        <label for="fuwu_Shoujia" class="col-sm-2 control-label">售价:</label>
                        <div class="col-sm-9">
                            <input  type="text" name="fuwu_Shoujia" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入售价">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="zhuangtai" class="col-sm-2 text-right">启用状态:</label>
                        <div class="col-sm-8">
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="zhuangtai" value="1" checked="checked" style="margin-top: 2px">
                                启用
                            </div>

                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="zhuangtai" value="2" style="margin-top: 2px">
                                禁用
                            </div>
                        </div>
                    </div>

                    <%--<div class="form-group">--%>
                        <%--<label for="jifem_Name" class="col-sm-2 text-right">是否积分兑换:</label>--%>
                        <%--<div class="col-sm-8">--%>
                            <%--<div class="radio-inline" style="margin-top: -8px">--%>
                                <%--<input type="radio" name="jifem_Name" value="1" checked="checked" style="margin-top: 2px">--%>
                                <%--是--%>
                            <%--</div>--%>

                            <%--<div class="radio-inline" style="margin-top: -8px">--%>
                                <%--<input type="radio" name="jifem_Name" value="2" style="margin-top: 2px">--%>
                                <%--否--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>


                    <div class="form-group">
                        <label for="beiZhu" class="col-sm-2 control-label">备注:</label>
                        <div class="col-sm-9">
                            <input  type="text" name="beiZhu"  class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入服务备注">
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  onclick="doadd()">增加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<%--修改模态框--%>
<div class="ibox-content">
    <div class="modal inmodal" id="Div4" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <%--修改模态框--%>
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                            </button>
                            <h4 class="modal-title">修改服务项目</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" method="post" >
                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">项目名称:</label>
                                    <div class="col-sm-10">
                                        <input  type="text" name="fuwu_NameG" class="form-control" id="title" placeholder="请输入项目名称">
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">所属分类:</label>
                                    <div class="col-sm-10">
                                        <div class="col-sm-6">
                                            <select name="fuwu_FenleiG" class="form-control" <%--id="title"--%> style="margin-left: -14px">
                                                <option value="1">普通服务</option>
                                                <option value="2">理发</option>
                                                <option value="3">美容类</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">店铺限制:</label>
                                    <div class="col-sm-10">
                                        <div class="col-sm-6">
                                            <select name="dp_XianZhiG" class="form-control" <%--id="title"--%> style="margin-left: -14px">
                                                <option value="1">启用店铺</option>
                                                <option value="2">禁用店铺</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">售价:</label>
                                    <div class="col-sm-9">
                                        <input  type="text" name="fuwu_ShoujiaG" class="form-control" <%--id="title"--%>>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="title" class="col-sm-2 text-right">启用状态:</label>
                                    <div class="col-sm-8">
                                        <div class="radio-inline" style="margin-top: -8px">
                                            <input type="radio" name="zhuangtaiG" value="1" checked="checked" style="margin-top: 2px">
                                            启用
                                        </div>

                                        <div class="radio-inline" style="margin-top: -8px">
                                            <input type="radio" name="zhuangtaiG" value="2" style="margin-top: 2px">
                                            禁用
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">备注:</label>
                                    <div class="col-sm-10">
                                        <input  type="text" name="beiZhuG"  class="form-control" <%--id="title"--%> placeholder="请输入服务备注">
                                    </div>
                                </div>


                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary"  onclick="doupdate()">修改</button>
                                </div>
                            </form>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
